<template>
  <div class="page-component__content">
    <div class="container"
         v-if="show === 1">
      <div class="content">
        <div class="van-cell-box mb-1">
          <h2>找回密码</h2>
        </div>
        <div class="from">
          <van-cell-group class="mb-3">
            <van-field v-model="form.phone"
                       placeholder="请输入注册电话号码"
                       @blur="checkFrom('phone')"
                       @keyup="checkFrom('phone')"
                       :class="{'error-red-border':!!checkToast.phone}"
                       :error-message="checkToast.phone"
                       :error="!!checkToast.phone" />
            <van-field v-model="form.pass"
                       placeholder="请输入新密码"
                       autocomplete="new-password"
                       @blur="checkFrom('pass')"
                       @keyup="checkFrom('pass')"
                       type="password"
                       :class="{'error-red-border':!!checkToast.pass}"
                       :error-message="checkToast.pass"
                       :error="!!checkToast.pass" />
            <van-row class="d-flex align-items-center">
              <van-col span="12">
                <van-field v-model="form.code"
                           maxlength="6"
                           placeholder="请输入验证码" />
              </van-col>
              <van-col span="12"
                       class="text-right px-1">
                <van-button type="info"
                            size="large"
                            @click="countDown"
                            :disabled="!canClick">{{content}}</van-button>
              </van-col>
            </van-row>
          </van-cell-group>
        </div>
        <button class="but-button but-theme is-round but-block"
                @click="Check">确定</button>
        <div class="text-center mt-2 color-gray">
          我有账户，立即 <router-link to="/login">登录</router-link> >>
        </div>
      </div>
    </div>
    <div class="content"
         v-else>
      <div class="mb-2"
           style="color:#333333">
        <h3 class="font-s-50">密码已经重置成功！</h3>
        <p class="font-s-30 mt-1">现在去登录吧！</p>
      </div>
      <router-link to="/login"
                   class="but-button but-theme is-round but-block d-block">登录</router-link>
    </div>
  </div>
</template>

<script>
import resetPass from '@/axios/api/user/resetPass'
import getPhoneCode from '@/axios/api/user/getPhoneCode'
import { Base64 } from 'js-base64'
import { removeLoginCookie } from '@/axios/utils'
import Cookies from 'js-cookie'
export default {
  name: 'name',
  components: {},
  props: {},
  data () {
    return {
      // 表单数据
      form: {
        phone: '', // 手机号
        pass: '', // 密码
        code: '' // 验证码
      },
      // 提示错误信息
      checkToast: {
        phone: null,
        pass: null,
        code: null // 验证码
      },
      content: '发送验证码', // 按钮里显示的内容
      totalTime: 60, // 记录具体倒计时时间
      canClick: true, // 添加canClick

      // 判断显示注册步骤
      show: 1

    }
  },
  watch: {},
  computed: {},
  methods: {
    removeLoginCookie,
    // 提交登录
    submit () {
      let pass = Base64.encode(this.form.pass)
      resetPass({
        phone: this.form.phone,
        pass: pass,
        code: this.form.code
      }).then(res => {
        if (res.data) {
          // 重置密码删除记录登录cookie
          this.removeLoginCookie()
          Cookies.set('phone', '')
          this.show = 2
        } else {
          this.$toast(res.err.message)
        }
      })
    },
    Check () {
      this.checkFrom('phone')
      this.checkFrom('pass')
      this.checkFrom('code')
      // 验证输入状态 成功之后跳转到获取验证码页面
      // 校验手机号是否存在接口没有 跳过
      let isTrue = true
      let form = this.form
      let checkToast = this.checkToast
      for (let key in form) {
        if (!form[key] || !!checkToast[key]) {
          // 如果数据为空 并且 验证不为空 就属于没通过
          isTrue = false
          return false
        }
      }
      // 验证通过 显示
      if (isTrue) {
        this.submit()
      }
    },
    countDown () {
      // 触发获取验证码
      if (!this.canClick) return // 改动的是这两行代码
      this.canClick = false
      this.content = `重发(${this.totalTime}s)`
      this.getPhoneCodeFn() // 获取验证码
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = `重发(${this.totalTime}s)`
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.content = '重发'
          this.totalTime = 10
          this.canClick = true // 这里重新开启
        }
      }, 1000)
    },
    getPhoneCodeFn () {
      // 获取验证码
      let phone = this.form.phone
      getPhoneCode(phone, 1)
    },
    checkFrom (type) {
      if (type === 'phone') {
        let phone = this.form.phone
        // let myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/
        let myreg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/

        if (!phone) {
          // 校验手机号
          // 校验是否为空
          this.checkToast.phone = '请输入手机号'
        } else if (!myreg.test(phone)) {
          // 校验手机格式
          this.checkToast.phone = '请输入正确的手机号'
        } else {
          // 如果符合 关闭错误提示
          this.checkToast.phone = null
        }
      } else if (type === 'pass') {
        // 校验密码1
        let pass = this.form.pass
        if (!pass) {
          // 校验是否为空
          this.checkToast.pass = '请输入密码'
        } else if (pass.length < 8 || pass.length > 16) {
          // 校验手机格式
          this.checkToast.pass = '8-16位英文数字或符号'
        } else {
          // 如果符合 关闭错误提示
          this.checkToast.pass = null
        }
      } else if (type === 'code') {
        // 校验密码1
        let code = this.form.code
        if (!code) {
          // 校验是否为空
          this.checkToast.code = '请输入密码'
          this.$toast('请输入验证码')
        } else {
          // 如果符合 关闭错误提示
          this.checkToast.code = null
        }
      } else {
        console.log('错误检验类型')
      }
    }
  },
  // 创建实例后
  created () { },
  // 挂载后
  mounted () { }
}
</script>

<style lang="scss" scoped>
// 最外层容器
.page-component__content {
  min-height: calc(100vh - #{$header-h});
  background-color: #fff;
}
/* .container {
  // background-color: #131622;
} */

.content {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: px-calc(60) px-calc(84);
}

// 协同UI的表单外容器
.van-cell-box {
  padding: 10px 0;
}

// 公共样式 待整理
.color-gray {
  color: #999999;
}
.title-gray {
  color: #333333;
}

// 组件
//文本框
::v-deep .van-cell {
  font-size: px-calc(34);
  margin-bottom: px-calc(32);
  padding: px-calc(32) 0;
  overflow: visible; // 调整报错信息位置
  // position: relative; // 调整报错信息位置
  .van-cell__value {
    overflow: visible; // 调整报错信息位置
  }
  .van-field__error-message {
    // 调整报错信息位置
    position: absolute;
    bottom: px-calc(-80);
    z-index: 1;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
::v-deep.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: 0;
}
::v-deep.van-cell::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 0.01rem solid #999999;
  transform: scaleY(0.5);
}
::v-deep.van-button--disabled {
  background-color: #a6a6a6;
  opacity: 1;
  border-color: #a6a6a6;
}
</style>
